<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram - Two Flywheels</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }
    canvas {
        border: 1px solid #ccc;
        background-color: #fff;
    }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    const mainFont = 'italic 22px Times New Roman';
    const subFont = 'italic 16px Times New Roman';
    const captionFont = '20px Times New Roman';

    // --- Helper function to draw an arrowhead ---
    // (x, y) is the tip of the arrow. 'angle' is the direction it points in radians.
    function drawArrowhead(ctx, x, y, angle) {
        const headlen = 12;
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(-headlen, -headlen / 2);
        ctx.lineTo(0, 0);
        ctx.lineTo(-headlen, headlen / 2);
        ctx.stroke();
        ctx.restore();
    }

    // --- Diagram Parameters ---
    const R1 = 80;
    const x1 = 150;
    const y1 = 180;

    const R2 = R1 / 2; // R1 = 2 * R2
    const x2 = x1 + R1 + R2 + 60; // Position second wheel relative to first
    const y2 = y1;


    // --- Draw Flywheel 1 (Left) ---
    ctx.beginPath();
    ctx.arc(x1, y1, R1, 0, 2 * Math.PI);
    ctx.stroke();

    // Radius line and label for R1
    const angle1 = 5 * Math.PI / 4; // Lower-left quadrant (approx 7:30 position)
    const endX1 = x1 + R1 * Math.cos(angle1);
    const endY1 = y1 + R1 * Math.sin(angle1);
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(endX1, endY1);
    ctx.stroke();

    ctx.font = mainFont;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const labelR1X = x1 + R1 * 0.55 * Math.cos(angle1);
    const labelR1Y = y1 + R1 * 0.55 * Math.sin(angle1);
    ctx.fillText('R', labelR1X - 7, labelR1Y);
    ctx.font = subFont;
    ctx.fillText('1', labelR1X + 4, labelR1Y + 5);


    // Rotation arrows for Flywheel 1 (Clockwise)
    const arrowOffset = 15;
    const arrowWidth = R1 * 0.8;

    // Top arrow
    const topArrowY = y1 - R1 - arrowOffset;
    const topStartX = x1 - arrowWidth / 2;
    const topEndX = x1 + arrowWidth / 2;
    const topCtrlX = x1;
    const topCtrlY = topArrowY - 15;
    ctx.beginPath();
    ctx.moveTo(topStartX, topArrowY);
    ctx.quadraticCurveTo(topCtrlX, topCtrlY, topEndX, topArrowY);
    ctx.stroke();
    const topTangentAngle = Math.atan2(topArrowY - topCtrlY, topEndX - topCtrlX);
    drawArrowhead(ctx, topEndX, topArrowY, topTangentAngle);

    // Bottom arrow
    const bottomArrowY = y1 + R1 + arrowOffset;
    const bottomStartX = x1 + arrowWidth / 2;
    const bottomEndX = x1 - arrowWidth / 2;
    const bottomCtrlX = x1;
    const bottomCtrlY = bottomArrowY + 15;
    ctx.beginPath();
    ctx.moveTo(bottomStartX, bottomArrowY);
    ctx.quadraticCurveTo(bottomCtrlX, bottomCtrlY, bottomEndX, bottomArrowY);
    ctx.stroke();
    const bottomTangentAngle = Math.atan2(bottomArrowY - bottomCtrlY, bottomEndX - bottomCtrlX);
    drawArrowhead(ctx, bottomEndX, bottomArrowY, bottomTangentAngle);


    // --- Draw Flywheel 2 (Right) ---
    ctx.beginPath();
    ctx.arc(x2, y2, R2, 0, 2 * Math.PI);
    ctx.stroke();

    // Radius line and label for R2
    const angle2 = 3 * Math.PI / 4; // Upper-left quadrant (approx 10:30 position)
    const endX2 = x2 + R2 * Math.cos(angle2);
    const endY2 = y2 + R2 * Math.sin(angle2);
    ctx.beginPath();
    ctx.moveTo(x2, y2);
    ctx.lineTo(endX2, endY2);
    ctx.stroke();

    ctx.font = mainFont;
    const labelR2X = x2 + R2 * 0.6 * Math.cos(angle2);
    const labelR2Y = y2 + R2 * 0.6 * Math.sin(angle2);
    ctx.fillText('R', labelR2X - 7, labelR2Y);
    ctx.font = subFont;
    ctx.fillText('2', labelR2X + 4, labelR2Y + 5);


    // --- Draw Figure Caption ---
    ctx.font = captionFont;
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 1.127.', canvas.width / 2, 360);

</script>
</body>
</html>